<template>
  <div class="materials">
    <div class="industry">
      <div class="title">热门行业</div>
      <div class="list">
        <div v-for="(item, index) in popularIndustries" :key="index" class="list-item" @click="openGood(item)">
          <img :src="item.image_url" />
          <span class="name">{{ item.title }}</span>
        </div>
      </div>
    </div>
    <div class="material-list">
      <div v-for="(item, index) in materialList" :key="index" class="list-item">
        <div class="title">{{ item.title }}</div>
        <div class="line"></div>
        <div class="list">
          <div v-for="(subItem, index) in item.children" :key="index" class="sub-item" @click="openGood(item)">
            <span class="name">{{ subItem.title }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


export default {
  name: "infrastructureMaterials",

  props: {
    catId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      popularIndustries: [],
      materialList: [],
      treeData: [],
    };
  },
  computed: {


  },
  watch: {
    catId(newVal, oldVal) {
      console.log(newVal, oldVal, "oldVal catId");
      for(let i = 0; i < this.popularIndustries.length; i++){
        if(this.popularIndustries[i].id == newVal){
          this.materialList = this.popularIndustries[i].children
        }
      }
    }
  },

  created() {
   // this.initData();
    this.handleSelect();
    console.log(this.catId, "catId");
  },

  methods: {
    openGood(item){
      this.$router.push({
        path: '/goodsAndServices',
        query: {
          cat_id: item.id,
        }
      })
    },
    handleSelect() {
      this.$httpApi("/api/getProductCat", {
          parent_id:0,
          is_tree:1,
        },
         "get"
      )
        .then((res) => {
          this.popularIndustries = res.data;
          for(let i = 0; i < this.popularIndustries.length; i++){
            if(this.popularIndustries[i].id == this.catId){
              this.materialList = this.popularIndustries[i].children
            }
          }
        });
    },
    initData() {
      this.materialList = [
        {
          title: '钢材',
          materials: ['盘螺', '高线', '螺纹钢', '钢筋连接套筒', '圆钢', '钢绞线', '钢丝绳', '止水钢板', '型钢', '工字钢', 'H型钢', '槽钢', '带钢', '角钢', '扁钢', '方钢', '钢卷', '热轧钢板', '耐磨钢板', '钢板', '合金板', 'U型钢', '冷轧钢板', '模具钢', '弹簧钢', '不锈钢', '彩色.', '不锈钢板', '不锈钢拉丝板', '不锈钢型材', '铝合金型材', '铝板', '合金管', '铜材', '镀锌钢板', '镀锌板', '镀锌卷', '镀锌型材', '无缝钢管', '焊接钢管']
        },
        {
          title: '活动房',
          materials: ['活动板房', '集装箱活动房', '集成房屋', '二手集装箱', '集装箱配件', '移动厕所', '生态厕所', '环保厕所', '移动环保厕所', '移动厕所租赁', '活动岗亭', '艺术岗亭', '防腐木岗亭', '玻璃岗亭', '不锈钢岗亭', '彩钢岗亭', '钢结构岗亭', '铝合金岗亭', '帐篷', '篷房']
        },
        {
          title: '钢结构',
          materials: ['彩钢板', '彩钢瓦', '楼承板', '金属屋面', '铝镁锰屋面板', '夹芯瓦', '彩钢', '琉璃瓦', '屋面板', '彩钢瓦支架', '瓦楞板', '彩钢压型板', '彩钢夹芯板', '泡沫夹芯板', '闭口楼承板', '钢结构厂房', '轻钢结构', '镀锌楼承板', '压型钢板', '彩钢扣板']
        },
        {
          title: '商品混凝土',
          materials: ['商品混凝土', '轻质混凝土', '泡沫混凝土', '彩色混凝土', '透水混凝土', '陶粒混凝土', '水稳土', '沥青混凝土', '透光混凝土', '水玻璃混凝土']
        }
      ]

    }
  },
};
</script>
<style scoped lang="less">
.materials {
  background-color: #fff;
  height: 100%;
  width: 100%;
  padding: 18px 20px 22px 30px;

  .industry {
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #000000;
      text-align: left;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .list-item {
        margin-top: 12px;
        margin-right: 28px;
        display: flex;
        width: 100px;
        flex-direction: column;
        cursor: pointer;

        img {
          width: 100px;
          height: 100px;
        }

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 24px;
          text-align: center;
          font-style: normal
        }

        &:nth-child(9n) {
          margin-right: 0px !important;
        }
      }
    }
  }

  .material-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    
    .list-item {
      margin-top:20px;
      margin-right: 59px;
      width:calc((100% - 59px) / 2);

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        text-align: left;
      }
     
      .line{
        width: 543px;
        height:1px;
        background-color: #F1F1F1;
        margin-top:12px;
      }

      .list {
        margin-top: 12px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .sub-item {
          margin-right: 20px;
          cursor: pointer;
          .name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
          }
        }
      }

      &:nth-child(2n) {
        margin-right: 0px !important;
      }
    }
  }
}
</style>
